<template>
    <div>
        <Modal vif="isLoad" v-model="modal" class="modal-full" title="规则试算" width="90%">
            <div class="rule-eval-container" v-if="ruleIsLoad">
                <Tabs value="dataset">
                    <TabPane label="数据集" name="dataset">
                        <div>
                            <Row>
                                <Col :span="2" class="form-label">
                                <label>选择数据集</label>
                                </Col>
                                <Col :span="12">
                                <SelectControl v-model="dataset.dsId" @selectChange="dsChange" :path="path.dataset" :hasPage="true" :hasSearch="true"></SelectControl>
                                </Select-control>
                                </Col>
                                <Col class="form-label" span="2">
                                <label>页长</label>
                                </Col>
                                <Col span="2">
                                <Input v-model="dataset.pageSize"></Input>
                                </Col>
                                <Col class="form-label" span="2">
                                <label>页数</label>
                                </Col>
                                <Col span="2">
                                <Input v-model="dataset.pageNo"></Input>
                                </Col>
                                <Col class="text-right" span="2">
                                <Button :disabled="!dataset.dsId" type="primary" @click="datasetEval">试算</Button>
                                </Col>
                            </Row>
                        </div>
                        <hr>
                        <div v-if="dataset.isEval" class="eval-dsdata">
                            <GroupTable :data="dataset.groupData" :model="dataset.model">
                                <template slot="groupHeader" slot-scope="item">
                                    匹配条件:{{dataset.data.matched_details[item.index].condition_exp}}
                                    <div class="info-text">
                                        <span class="text-danger">{{dataset.data.matched_details[item.index].matched_data.length}}</span> 条数据
                                    </div>
                                </template>
                                <template slot="extColumn" slot-scope="item" v-if="ruleData.exp_type!=='filter'">
                                    <td class="ext-col">
                                        <Button class="return-box" icon="android-list">
                                            生成数据
                                            <div class="return-list">
                                                <table>
                                                    <tr v-for="(rd,key) in item.row.return_data">
                                                        <td>{{paramsMap[key]?paramsMap[key].name:key}}</td>
                                                        <td>{{rd}}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </Button>
                                    </td>
                                </template>
                            </GroupTable>

                            <div v-if="false" v-for="detail in dataset.data.matched_details" class="eval-dsdata-item">
                                <h4>
                                    匹配条件:{{detail.condition_exp}}
                                    <div class="info-text">
                                        <span class="text-danger">{{detail.matched_data.length}}</span> 条数据</div>
                                </h4>
                                <GridTable :data="detail.matched_data"></GridTable>
                            </div>
                        </div>
                        <div v-else class="eval-message">暂无试算结果</div>
                    </TabPane>
                    <TabPane label="单一数据" name="single">
                        <h4>试算参数</h4>
                        <FormControl v-if="ruleData" :col="2" :model="{fields:ruleData.params}" ref="singleForm"></FormControl>
                        <div class="eval-button-box">
                            <Button type="primary" @click="singleEval">试算</Button>
                        </div>
                        <hr>
                        <div v-if="single.isEval">
                            <table class="table" v-if="single.data.matched_details && single.data.matched_details.length">
                                <thead>
                                    <th>匹配规则</th>
                                    <th v-if="ruleData.exp_type!=='filter'">生成数据</th>
                                </thead>
                                <tr v-for="(detial,index) in single.data.matched_details">
                                    <td>
                                        {{detial.condition_exp}}
                                    </td>
                                    <td v-if="ruleData.exp_type!=='filter'">
                                        <table v-if="detial.return_data && detial.return_data[0]">
                                            <tr v-for="(rd,key) in detial.return_data[0]">
                                                <td>{{paramsMap[key]?paramsMap[key].name:key}}</td>
                                                <td>{{rd}}</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <div v-else class="eval-message text-danger">无匹配规则</div>
                        </div>
                        <div v-else class="eval-message">暂无试算结果</div>
                    </TabPane>
                </Tabs>

            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
            </div>
        </Modal>
    </div>
</template> 

<script>
import ModalBase from "../modalBase";
import SelectControl from "@/components/selector";
import Modal from "@/element/modal";
import FormControl from "@/components/form";
import GridTable from "@/components/gridTableSample";
import GroupTable from "@/components/groupTable";
import { link } from "@/common";

export default {
  extends: ModalBase,
  props: {},
  data() {
    return {
      path: {
        find: "service/{app}/rule/{code}",
        dataset: "service/{app}/bill/data/dataset/list",
        datasetEval: "service/{app}/rule/eval/dataset",
        singleEval: "service/{app}/rule/eval/single"
      },
      ruleIsLoad: false,
      ruleData: {},
      paramsMap: {},
      dataset: {
        isEval: false,
        data: {},
        mode: {},
        dsId: null,
        groupData: [],
        pageSize: 1,
        pageNo: 10
      },
      single: {
        isEval: false,
        data: {},
        mode: {}
      }
    };
  },
  created() {},
  methods: {
    load() {
      this.clearStatus();
      link(this.path.find, null, {
        method: "get",
        param: this.$parent.actionData
      }).then(res => {
        this.ruleData = res.data;
        this.paramsMap = {};
        if (this.ruleData.params) {
          this.ruleData.params.forEach(field => {
            this.paramsMap[field.code] = field;
          });
        }
        this.ruleIsLoad = true;
      });
    },
    clearStatus() {
      this.ruleIsLoad = false;
      this.dataset.isEval = false;
      this.single.isEval = false;
      this.dataset.pageNo = 1;
      this.dataset.pageSize = 20;
    },
    datasetEval() {
      this.dataset.isEval = false;
      link(this.path.datasetEval, {
        dataset_id: this.dsData.id,
        rule_id: this.ruleData.id,
        pageNo: this.dataset.pageNo,
        pageSize: this.dataset.pageSize
      }).then(res => {
        this.dataset.data = res.data;
        this.dataset.groupData = [];
        //var matchMap
        res.data.matched_details.forEach((item, index) => {
          var group = [];
          item.matched_data.forEach((row, rowIndex) => {
            group.push(row);
            /*
            if (item.return_data[rowIndex]) {
              row.return_data = this.getRenderDataContent(
                item.return_data[rowIndex]
              );
            }
            */
          });
          this.dataset.groupData.push(group);
        });
        var tempModel = this.getTempModel(this.dataset.groupData);
        this.dataset.model = tempModel;
        this.dataset.isEval = true;
      });
    },
    getRenderDataContent(data) {
      return data;
    },
    dsChange(row) {
      this.dsData = row;
    },
    singleEval() {
      var paramsData = this.$refs.singleForm.formData;
      link(this.path.singleEval, {
        data: paramsData,
        rule_id: this.ruleData.id
      }).then(res => {
        this.single.data = res.data;
        this.single.isEval = true;
      });
    },
    getTempModel(data) {
      if (data) {
        for (let i in data) {
          if (data[i]) {
            for (let j in data[i]) {
              var row = data[i][j];
              var tempModel = { fields: [] };
              for (let i in row) {
                if (i !== "return_data") {
                  tempModel.fields.push({
                    code: i,
                    name: i
                  });
                }
              }
              return tempModel;
            }
          }
        }
      }
    },
    formSubmit() {}
  },
  components: {
    Modal,
    SelectControl,
    FormControl,
    GridTable,
    GroupTable
  }
};
</script>

<style lang="less">
.rule-eval-container {
  .ivu-tabs {
    min-height: 100%;
    overflow-y: visible;
  }
  .eval-button-box {
    text-align: right;
    padding: 15px 0 0;
    label {
      line-height: 33px;
    }
  }
  .ivu-tabs-tabpane > div {
    padding: 0 16px;
  }
  .info-text {
    float: right;
    font-weight: normal;
  }
  h4 {
    margin: 8px;
  }
  table.table > tbody > tr > td.ext-col {
    text-align: right;
    padding-right: 80px;
  }
}

.eval-message {
  margin: 15px auto;
  text-align: center;
  color: #bdc0c6;
}

.table td {
  padding: 10px;
}

.return-box {
  position: relative;
  &:hover .return-list {
    display: block;
  }
  .return-list {
    position: absolute;
    display: none;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #dddee1;
    z-index: 1;
    width: 170px;
    top: 28px;
    left: 0px;
    table tr > td {
      padding: 6px 12px;
      height: auto;
      color: #444;
      word-break: break-all;
      white-space: normal;
      word-wrap: break-word;
    }
  }
}

.form-label {
  line-height: 32px;
  text-align: right;
  padding-right: 12px;
}

.modal-full {
  .ivu-modal .ivu-modal-content .ivu-modal-body > div.editor-warpper {
    padding: 0;
  }
}
</style>
